<template>
  <div class="app-h5">
    <img src="@/assets/bg.png" alt=""/>

    <div class="download-container" @click="handleDownload">
      <button class="download-btn">
        立即下载
      </button>
    </div>
  </div>
</template>
<script>
export default {
  name: 'Download',
  data() {
    return {
      form: {},
      contentHtml: '',
      androidUrl: "https://xxf-2.dynamicycle.com/member_preview/app_1.1.3_xxf.apk",
      fallbackUrl: "https://xxf-2.dynamicycle.com/member_preview/app_1.1.3_xxf.apk",
      iosUrl: ""
    }
  },
  mounted() {
    const query = this.$route.query
    if (query.contentId) {
      this.form.contentId = query.contentId
    }
    if (query.contentType) {
      this.form.contentType = query.contentType
    }
    this.initData()
  },
  methods: {

    handleDownload() {
      const ua = navigator.userAgent;
      const isAndroid = /android/i.test(ua);
      const isiOS = /iphone|ipad|ipod/i.test(ua);
      const isWeChat = /micromessenger/i.test(ua);

      // 微信环境处理
      if (isWeChat) {
        this.showWeChatTip();
        return;
      }

      // 根据设备类型跳转
      if (isAndroid) {
        this.downloadForAndroid();
      } else if (isiOS) {
        this.redirectToAppStore();
      } else {
        this.redirectToFallback();
      }
    },

    downloadForAndroid() {
      // 创建隐藏的iframe实现下载（避免页面跳转）
      const iframe = document.createElement('iframe');
      iframe.style.display = 'none';
      iframe.src = this.androidUrl;
      document.body.appendChild(iframe);

      // 延迟移除iframe
      setTimeout(() => {
        document.body.removeChild(iframe);
      }, 5000);
    },

    redirectToAppStore() {
      // 先尝试直接打开App Store应用
      window.location.href = this.iosUrl;

      // 备用方案：如果跳转失败，500ms后跳转网页版App Store
      setTimeout(() => {
        window.location.href = this.getWebAppStoreUrl();
      }, 500);
    },

    redirectToFallback() {
      window.location.href = this.fallbackUrl;
    },

    showWeChatTip() {
      alert('请点击右上角菜单，选择在浏览器中打开以完成下载');
    },

    getWebAppStoreUrl() {
      // 从itms链接中提取ID，转换为网页版链接
      const matches = this.iosUrl.match(/id(\d+)/i);
      if (matches && matches[1]) {
        return `https://apps.apple.com/app/id${matches[1]}`;
      }
      return this.fallbackUrl;
    }
  }
}

</script>

<style scoped>
body {
  width: 100%;
  padding: 0;
  margin: 0;
}

.app-h5 {
  //padding: 12px;
  position: relative;
}

.app-h5 img {
  width: 100%;
}

/* 按钮容器样式 - 固定在页面中下部 */
.download-container {
  position: fixed;
  bottom: 15%; /* 移动端通常放在稍微靠下的位置 */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 100;
  padding: 0 20px;
}

/* 按钮基础样式 */
.download-btn {
  display: inline-block;
  padding: 16px 40px; /* 增大尺寸便于触摸 */
  background: linear-gradient(135deg, #4a6cf7 0%, #2541b2 100%);
  color: white;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 15px rgba(74, 108, 247, 0.3);
  transition: all 0.2s ease;
  -webkit-tap-highlight-color: transparent; /* 移除移动端点击高亮 */
  min-width: 220px; /* 更大的最小宽度 */
  touch-action: manipulation; /* 优化触摸响应 */
}

/* 点击/触摸效果 */
.download-btn:active {
  transform: scale(0.96); /* 点击时轻微缩小 */
  background: linear-gradient(135deg, #343090 0%, #5f59f7 100%);
}

/* 点击脉冲效果 */
.download-btn:focus {
  outline: none;
  animation: pulse 0.5s;
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(74, 108, 247, 0.4);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(74, 108, 247, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(74, 108, 247, 0);
  }
}

/* 移动端特定优化 */
@media (max-width: 480px) {
  .download-btn {
    padding: 14px 32px;
    font-size: 18px;
    min-width: 180px;
  }

  .download-container {
    bottom: 10%; /* 在小屏幕上位置更靠下 */
  }
}

</style>
